<template>
  <div id="recordslist"> 


          <el-table :data="recordsdata" style="width: 100%" :height="dtheight" :header-cell-style="{background:'#4F81BC',color:'white'}"
          :row-class-name="tableRowClassName"  :border="true">

               
                <el-table-column label="手机号"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.telphone }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="用户名"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.nickname }}</span>
                    </template>
                </el-table-column>
                 <el-table-column :label="variable_name4 + '等级'"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span>{{ scope.row.manor_title }}</span>
                    </template>
                </el-table-column>
                 <el-table-column label="数量"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.count }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="总价格"  align='center' >                   
                    <template slot-scope="scope">     
                         <el-button @click="see_jg(scope.row)">{{ scope.row.all_price }}</el-button>              
                    </template>
                </el-table-column>
                 <el-table-column label="时间"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.time }}</span>
                    </template>
                </el-table-column>
 
           </el-table>  


           <!-- 果种详情 -->
           <el-dialog :title="variable_name4 + '详情'" :visible.sync="mtk"  width="50%">
              <div style="width:100%;"> 
                <el-form ref="form"  label-width="80px">  
                    <el-row> 
                        <el-col :span="24" style="text-align: right;">  
                            <el-button type="primary" v-if="export_type" class="custom_color_button" style="margin-bottom:10px;"  @click="output">导出-{{ export_title }}</el-button>              
                        </el-col>       
                    </el-row>   
                </el-form>

                <el-table :data="mtkdata" style="width: 100%" height="580" :header-cell-style="{background:'#4F81BC',color:'white'}"
                       :row-class-name="tableRowClassName"  :border="true">

               
                <el-table-column :label="variable_name4 + '名称'"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.title }}</span>
                    </template>
                </el-table-column>
                 <el-table-column :label="variable_name4 + '编号'"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.pid }}</span>
                    </template>
                </el-table-column>
                 <el-table-column :label="variable_name4 + '价值'"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.init_price }}</span>
                    </template>
                </el-table-column>
               
               </el-table>  
                 <div style="margin-top:20px;text-align: center;">
                    <el-pagination
                        background
                        @current-change="handleCurrentChange"
                        :page-size="10"  
                        layout="prev, pager, next, jumper"
                        :total="count">
                    </el-pagination>
                 </div>              

                </div> 
         </el-dialog>


           <!-- 导出表格数据表格 -->
        <el-table v-show="false" :data="export_datalist" id="mytable1" style="width: 100%;height:10px;">
               <el-table-column :label="variable_name4 + '名称'"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.title }}</span>
                    </template>
                </el-table-column>
                 <el-table-column :label="variable_name4 + '编号'"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.pid }}</span>
                    </template>
                </el-table-column>
                 <el-table-column :label="variable_name4 + '价值'"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.init_price }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="时间"  align='center' >                   
                    <template slot-scope="scope">                   
                        <span >{{ scope.row.time }}</span>
                    </template>
                </el-table-column>
        </el-table> 


   </div>
</template>

<script>

import FileSaver from 'file-saver'
import XLSX from 'xlsx'
export default {
   name: 'recordslist',
   props:{
      recordsdata:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
        mtk:false,
        mtkdata:[],
        gdid:'',
        page:1,
        count:0,

        export_type:false,
        export_datalist:[],
        export_title:'不可导出',
    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 243
      
  },
  mounted (){
    
  },
  methods: {
   see_jg(row){
      this.mtk = true
      this.gdid = row.gdid
      this.page = 1
      this.see_fun()
      
      this.export_title = '不可导出'
      this.export_datalist = []
      this.export_type = false
      this.export_fun()
   },
    see_fun(){
        this.post("/goods/userGoodsLog", {
            gdid:this.gdid,
            page:this.page,
            search_all:0 //0 分页 1 全部
        }).then(res => {  
            //console.log(res)
            this.count = res.result.count
            this.mtkdata = res.result.list

        })
     },
     export_fun(){
         this.post("/goods/userGoodsLog", {
            gdid:this.gdid,
            page:this.page,
            search_all:1 //0 分页 1 全部
        }).then(res => {  
                   
            this.export_datalist = res.result.list

            this.export_title = '可导出'
            this.export_type = true

        })
      },
     output(){      
          var wb = XLSX.utils.table_to_book(document.querySelector("#mytable1"));//mytable为表格的id名
              var wbout = XLSX.write(wb, {
                bookType: "xlsx",
                bookSST: true,
                type: "array"
              });
              try {
                FileSaver.saveAs(
                  new Blob([wbout], { type: "application/octet-stream" }),
                  "sheet.xlsx"
                );
              } catch (e) {
                if (typeof console !== "undefined") console.log(e, wbout);
              }
              return wbout;  

     },
    handleCurrentChange(val) {
        this.page = val
        this.see_fun()
        console.log(`当前页: ${val}`);
      }


  }
}
</script>


<style scoped>

</style>